import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Divider,
  Radio,
  Switch,
  Checkbox,
  Select,
  Modal,
  TreeSelect,
  Transfer,
  message,
  Table, DatePicker
} from 'antd'
import React, {useEffect, useState} from 'react'
import MyDatePicker from '../components/MyDatePicker2'
import ManyUpload from '../components/ManyUpload'
import {useNavigate, useParams} from 'react-router-dom'
import {
  adminActivatyAddAPI,
  adminActivatyEditAPI,
  adminActivatyInfo,
  adminCouponList,
  adminCouponInfo  // 从activaty.js导入，而不是不存在的coupon.js
} from '../service/activaty'
import {cityTreeAPI, shopList, shopListByCityIdAPI} from '../service/shop'  // 将adminShopList改为shopList
import {userGroupList} from '../service/user'  // 移除不存在的userActivatyList
import dayjs from 'dayjs'

const {RangePicker} = DatePicker
export default function MarketAddActivaty() {
  // 是否显示提示为空信息
  const [isShow, setIsShow] = useState(false)
  const [isShow2, setIsShow2] = useState(false)
  const [isShow3, setIsShow3] = useState(false)
  // 初始化日期
  const [initialDate, setInitialDate] = useState()
  const navigate = useNavigate()
  // 是否开启推送
  const [push, setPush] = useState(false)


  const {id, selectId} = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  const activityTypes = selectId
  const [form] = Form.useForm()
  // 新建活动还是编辑活动
  const [title, setTitle] = useState(isEditing ? '编辑活动' : '新建活动')
  // 店铺的id
  const [businessId, setBusinessId] = useState([])
  // 店铺名称列表
  const [businessName, setBusinessName] = useState([])
  // 图片列表
  const [fileList, setFileList] = useState([])
  // 是否打开指定店铺模态框
  const [shopOpen, setShopOpen] = useState(false)
  // 是否打开指定人群模态框
  const [personOpen, setPersonOpen] = useState(false)
  // 人群列表
  const [personList, setPersonList] = useState([])
  // 优惠券模态框
  const [couponOpen, setCouponOpen] = useState(false)
  // 优惠券列表
  const [couponList, setCouponList] = useState([])
  // 是否有选中优惠券
  const [selectedLabel, setSelectedLabel] = useState()
  const [selectedCoupon, setSelectedCoupon] = useState('')
  const [tmpSelectedCoupon, setTmpSelectedCoupon] = useState('')
  // 选中优惠券id
  const [selectedCouponId, setSelectedCouponId] = useState('')
  const [tmpSelectedCouponId, setTmpSelectedCouponId] = useState('')
  // 选择指定区域
  const [region, setRegion] = useState([])
  // 三级省市区数据
  const [regionData, setRegionData] = useState([])
  // 保存选中的人群
  const [selectedPerson, setSelectedPerson] = useState([])
  // 最终保存的人群
  const [selectedConfirmPerson, setSelectedConfirmPerson] = useState([])

  // 保存选中的人群id
  const [selectedPersonId, setSelectedPersonId] = useState('')
  const [selectedConfirmPersonId, setSelectedConfirmPersonId] = useState('')

  // 穿梭机数据
  const [mockData, setMockData] = useState([])
  const initialTargetKeys = mockData
      .filter((item) => Number(item.key) > 10)
      .map((item) => item.key)
  const [targetKeys, setTargetKeys] = useState(initialTargetKeys)
  // 选中的投放渠道
  const [tf, setTf] = useState([])
  const [selectedItems, setSelectedItems] = useState([]);
  // 投放渠道
  const tfOptions = [
    {id: 0, label: '内容页面', value: '0'},
    {id: 1, label: '定时推送', value: '1'},
    {id: 2, label: '即时推送', value: '2',}
  ]
  // 用户行为 0 LBS   1注册用户
  const [action, setAction] = useState('0')
  // 自动化营销是否开启
  const [checked, setChecked] = useState(false)
  // 初始化状态，默认选中"内容页面"
  const [selectedOptions, setSelectedOptions] = useState(['0']);
  // 处理复选框变化事件
  const handleCheckboxChange = (value) => {

    setSelectedOptions(prev => {
      const newOptions = prev.includes(value)
          ? prev.filter(item => item !== value)
          : [...prev, value]
      // 如果取消选中即时推送，同步关闭switch
      if (!newOptions.includes('2')) {
        setChecked(false);
        setPush(false);
      } else {
        setChecked(true);
        setPush(true);
        setAction('0');

      }

      return newOptions;
    });

  };

  //营销配置
  const [selectedValue, setSelectedValue] = useState('');
  const marketOptions = [
    {label: 'LBS', value: '0'},
    {label: '注册用户', value: '1'}
  ];
  //注册来源
  const [regSource, setRegSource] = useState('');
  const regOptions = [
    {label: 'APP', value: '0'},
    {label: '小程序', value: '1'}
  ];
  //营销配置选择--用户行为
  const handleChange = (e) => {
    setSelectedValue(e);
    setAction(e)

  };
  const handleRegSource = (e) => {
    setRegSource(e);

  };
  // 检查即时推送是否被选中
  //const isInstantPushChecked = selectedOptions.includes('2');


  //const checked = selectedOptions.includes('2');
  // 递归函数处理三级城市树
  function transformData(data) {
    return data.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.id,
        depth: item.depth,
        children: item.children ? transformData(item.children) : null
      }
    })
  }

  // 递归获取节点层级
  const getNodeLevel = (value, data) => {
    for (const item of data) {
      if (item.value === value[0]) {
        return item.depth;
      }
      if (item.children && item.children.length) {
        const level = getNodeLevel(value, item.children);
        if (level) return level;
      }
    }
    return null;
  };
  //活动时间
  const [selectedDate, setSelectedDate] = useState()
  // 保存活动选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 保存注册的日期范围
  const [registerDate, setRegisterDate] = useState(null)
  // 保存注册选择的日期
  const [selectedRegisterDateString, setSelectedRegisterDateString] = useState(null)

  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'd'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-30, 'd'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-90, 'd'), dayjs()]
    }
  ]
  // 日期选择 --- 获取日期
  const onRangeChangeregister = (dates, dateStrings) => {

    if (dates && selectedRegisterDateString !== dateStrings[0]) {
      setRegisterDate(dates)
      setSelectedRegisterDateString(dateStrings)
    } else {
      // setSelectedDate(null)
    }
  }
  //活动时候设置
  const onRangeChange = (dates, dateStrings) => {
    if (dates && selectedDateString !== dateStrings[0]) {
      setSelectedDate(dates)
      setSelectedDateString(dateStrings)
      //console.log("日期字符：",dateStrings)
      //console.log("日期对象：",dates)
    } else {
      // setSelectedDate(null)
    }
  }
  // 处理Switch变化 点击自动营销按钮选中即时推送，并打开营销配置面板
  const handleSwitchChange = (checked) => {
    setChecked(checked);
    setPush(checked);
    setAction('0');
    // 点击Switch时选中/取消选中最后一个复选框
    const lastOptionValue = tfOptions[tfOptions.length - 1].value;
    if (checked) {
      // 如果Switch打开，添加最后一个选项到选中数组
      if (!selectedOptions.includes(lastOptionValue)) {
        setSelectedOptions([...selectedOptions, lastOptionValue]);
      }
    } else {
      // 如果Switch关闭，从选中数组中移除最后一个选项
      setSelectedOptions(
          selectedOptions.filter(value => value !== lastOptionValue)
      );
    }
  };

  useEffect(() => {
    // 获取三级城市树
    ;(async () => {
      const res = await cityTreeAPI()
      const newData = transformData(res.data)
      setRegionData(newData)
    })()
    // 获取优惠券
    ;(async () => {
      const res = await adminCouponList({
        pageNo: 1,
        pageSize: 1000
      })
      //console.log(res)
      // 保存优惠券
      setCouponList(res.data.objects)
    })()


    // 获取人群列表
    ;(async () => {
      const res = await userGroupList({pageNo: 1, pageSize: 1000})
      //console.log(res)
      setPersonList(res.data.objects)
    })()
    if (isEditing) {
      ;(async () => {
        const res = await adminActivatyInfo(id)
        //console.log(res)
        // 给表单赋值
        form.setFieldsValue(res.data)
        // 设置活动图片
        setFileList(
            res.data.pictureVOS.map((item, index) => {
              return {
                id: item.id,
                url: item.image
              }
            })
        )
        const start = dayjs(res.data.startDate);
        const end = dayjs(res.data.endDate);
        // 设置活动日期
        setSelectedDate([start, end])
        setSelectedDateString([start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')])
        // 设置注册日期
        if (res.data.registerStartDate != null) {
          const regStart = dayjs(res.data.registerStartDate);
          const regEnd = dayjs(res.data.registerEndDate);
          setRegisterDate([regStart, regEnd])
          setSelectedRegisterDateString([regStart.format('YYYY-MM-DD HH:mm:ss'), regEnd.format('YYYY-MM-DD HH:mm:ss')])
        }
        // 设置店铺---通过店铺id找到对应店铺名称
        // 第306行左右修改adminShopList为shopList
        const shopRes = await shopList({
          ids: res.data.shopIds.split(",")
        })
        const storeNames = shopRes.data.map((item) => {
          return item.storeName
        })
        const storeIds = shopRes.data.map((item) => {
          return item.id
        })
        setBusinessId(storeIds)
        setBusinessName(storeNames)
        // 设置指定人群---通过人群id找到对应店铺人群
        // 第316行左右修改userActivatyList为userGroupList
        const personRes = await userGroupList({
          ids: res.data.targetCustomer.split(",")
        })
        const personNames = personRes.data.map((item) => {
          return item.groupName
        })
        const personIds = personRes.data.map((item) => {
          return item.id
        })
        setSelectedConfirmPersonId(personIds)
        setSelectedConfirmPerson(personNames)
        //设置自动化营销
        if (res.data.marketingType === 1) {
          setChecked(true);
          setPush(true);
        }
        //设置 投放渠道
        const istfs = res.data.deliveryChannel
            ? res.data.deliveryChannel.split(',')
                .map(item => item.trim())
                .filter(item => item)
            : []
        setSelectedOptions(istfs);
        //营销配置：0LBS    1注册用户
        const activityConfiguration = res.data.activityConfiguration
        if (activityConfiguration != null) {
          setSelectedValue(activityConfiguration);
          setAction(activityConfiguration)
        }
        //注册来源 1App  2小程序
        const regSources = res.data.channelType
        if (regSources != null) {

          setRegSource(regOptions[regSources]?.value);
        }
        // // 设置活动奖励
        if(res.data.rewardCouponId!=null){
          const couponRes = await adminCouponInfo(res.data.rewardCouponId);
          setSelectedCouponId(res.data.rewardCouponId)
          setSelectedCoupon(couponRes.data.couponName)
        }
      })()
    } else {
      setSelectedValue(marketOptions[0]?.value || '')
      setRegSource(regOptions[0]?.value || '')
    }
  }, [])
  return (
      <>
        <Row className="info">
          <Col span={24}>
            <Flex justify={'space-between'}>
              <Typography.Title level={3}>{title}</Typography.Title>
            </Flex>
          </Col>
        </Row>
        <Form
            labelCol={{
              span: 2
            }}
            wrapperCol={{
              span: 12
            }}
            style={{width: '100%', marginTop: 30}}
            form={form}
            onFinish={(values) => {
              // 判断指定店铺是否为空
              if (businessId.length === 0) {
                setIsShow(true)
                return
              }
              // 判断活动人群是否为空
              if (selectedConfirmPersonId.length === 0) {
                setIsShow2(true)
                return
              }

              // 获取图片
              const imgIds = fileList.map((item) => {
                if (item.response) {
                  return item.response.data.url
                } else {
                  return item.url
                }
              })

              values.imgIds = imgIds
              values.startDate = selectedDateString[0]
              values.endDate = selectedDateString[1]
              //营销配置--营销类型
              if (action != '') {
                values.activityConfiguration = action
              }
              //注册时间
              if (selectedRegisterDateString != null) {
                values.registerStartDate = selectedRegisterDateString[0]
                values.registerEndDate = selectedRegisterDateString[1]
              }
              //注册来源
              if (regSource != '') {
                values.channel_type = regSource;
              }
              //奖励类型
              values.rewardType = 1


              //判断优惠券是否为空
              // 判断活动人群是否为空
              if (selectedCouponId.length === 0) {
                setIsShow3(true)
                return
              }
              // 添加优惠券id
              values.rewardCouponId = selectedCouponId
              // 选中的人群id，id用逗号隔开啊
              values.targetCustomer = selectedConfirmPersonId.join(',')
              // 选中的店铺id,id之间逗号隔开
              values.shopIds = businessId.join(',')
              // 投放渠道
              values.deliveryChannel = selectedOptions + ""
              // 自动化营销类型
              values.marketingType = checked ? 1 : 0
              //营销类型
              values.activityType = activityTypes;

              console.log(values)
              // 判断编辑还是添加
              if (isEditing) {
                // 编辑
                ;(async () => {
                  const res = await adminActivatyEditAPI({...values, id})
                  console.log(res)
                  if (res.code === '0') {
                    message.success('编辑成功')
                    navigate('/admin/market/activaty')
                  }
                })()
              } else {
                // 添加
                ;(async () => {
                  const res = await adminActivatyAddAPI(values)
                  console.log(res)
                  if (res.code === '0') {
                    message.success('添加成功')
                    navigate('/admin/market/activaty')
                  }
                })()
              }
            }}
        >
          <Row className="container" style={{marginBottom: 0, marginTop: 0}}>
            <Col span={24}>
              <Typography.Title level={4}>基本信息</Typography.Title>
            </Col>
            <Col span={24}>
              <Form.Item
                  label="活动名称"
                  name="activityName"
                  rules={[{required: true, message: '活动不能为空'}]}
              >
                <Input
                    style={{width: 300}}
                    maxLength={30}
                    showCount
                    placeholder="请输入活动名称"
                />
              </Form.Item>
              <Form.Item label="活动图片">
                <ManyUpload fileList={fileList} setFileList={setFileList}/>
              </Form.Item>
              <Form.Item label="活动时间">
                <RangePicker
                    value={selectedDate}
                    presets={rangePresets}
                    onChange={onRangeChange}
                />

              </Form.Item>
              <Form.Item
                  label="活动说明"
                  name="describes"
                  rules={[{required: true, message: '活动说明不能为空'}]}
              >
                <Input.TextArea style={{height: 120, resize: 'none'}}/>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col>
              <Divider style={{margin: 0}}/>
            </Col>
          </Row>
          <Row className="container" style={{marginTop: 0, marginBottom: 0}}>
            <Col span={24}>
              <Typography.Title level={4}>场景设计</Typography.Title>
            </Col>
            <Col span={24}>
              <Form.Item
                  label="活动目标"
                  name="activityTarget"
                  rules={[{required: true, message: '活动目标不能为空'}]}
              >
                <Input style={{width: 300}} placeholder="请输入活动目标"/>
              </Form.Item>
              <Form.Item label="适用店铺" hasFeedback required>
                <Button type="primary" onClick={() => setShopOpen(true)}>
                  指定店铺
                </Button>
                <span style={{marginLeft: 10}}>{businessName.join(',')}</span>
                {isShow && (
                    <div className="ant-form-explain">适用店铺不能为空</div>
                )}
              </Form.Item>
              <Form.Item label="活动人群" required>
                <Button type="primary" onClick={() => setPersonOpen(true)}>
                  指定人群
                </Button>
                <span style={{marginLeft: 10}}>
                {selectedConfirmPerson.join(',')}
              </span>
                {isShow2 && (
                    <div className="ant-form-explain">指定人群不能为空</div>
                )}
              </Form.Item>
              <Form.Item label="自动化营销" name="marketingType">
                <Switch
                    checked={checked}
                    onChange={handleSwitchChange}
                />
              </Form.Item>
              <Form.Item label="投放渠道">
                <div style={{
                  display: 'flex',
                  gap: '25px',  // 选项之间的间距
                  alignItems: 'center',
                  padding: '0px',
                  borderRadius: '6px'
                }}>
                  {tfOptions.map(option => (
                      <label key={option.id} style={{
                        display: 'flex',  //让复选框和文字在同一行
                        alignItems: 'center',  // 垂直居中对齐
                        gap: '8px',       // 复选框和文字的间距
                        cursor: 'pointer',
                        fontSize: '14px'
                      }}>
                        <Input
                            type="checkbox"
                            value={option.value}
                            checked={selectedOptions.includes(option.value)}
                            onChange={() => handleCheckboxChange(option.value)}
                            style={{width: '18px', height: '18px', cursor: 'pointer'}}
                        />
                        {option.label}
                      </label>
                  ))}
                </div>

              </Form.Item>
              {checked && push && (
                  <Form.Item label="营销配置">
                    <Select
                        style={{width: 300}}
                        value={selectedValue}
                        onChange={handleChange}
                    >
                      {marketOptions.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                      ))}
                    </Select>
                  </Form.Item>
              )}
              {checked && push && action === '0' && (
                  <Form.Item label="距离门店">
                    <Button style={{backgroundColor: '#EEE'}}>5</Button>
                    KM
                  </Form.Item>
              )}
              {checked && push && action === '1' && (
                  <>
                    <Form.Item label="注册时间">
                      <RangePicker
                          value={registerDate}
                          presets={rangePresets}
                          onChange={onRangeChangeregister}
                      />
                    </Form.Item>
                    <Form.Item label="注册来源">
                      <Select
                          value={regSource}
                          style={{width: 300}}
                          onChange={handleRegSource}
                      >
                        {regOptions.map((option) => (
                            <option key={option.value} value={option.value}>
                              {option.label}
                            </option>
                        ))}
                      </Select>
                    </Form.Item>
                  </>
              )}
            </Col>
          </Row>
          <Row>
            <Col>
              <Divider style={{margin: 0}}/>
            </Col>
          </Row>
          <Row className="container" style={{marginTop: 0, marginBottom: 0}}>
            <Col span={24}>
              <Typography.Title level={4}>奖励设置</Typography.Title>
            </Col>
            <Col span={24}>
              <Form.Item label="奖励类型" name="rewardType">
                <Radio.Group name="radioGroup" onChange={() => {
                }} value={1}>
                  <Radio value={1}>优惠券</Radio>
                  <Radio value={2} disabled>积分</Radio>
                  <Radio value={3} disabled>商品</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="活动奖励">
                {/* <Select
                placeholder="请选择"
                value={selectedCoupon}
                onClick={() => setCouponOpen(true)}
                style={{ width: 400 }}
              >

                {selectedCoupon && (
                  <Select.Option value={selectedCoupon}>
                    {selectedCoupon}
                  </Select.Option>
                )}
              </Select> */}
                <Button type="primary" onClick={() => setCouponOpen(true)}>
                  活动奖励
                </Button>
                <span style={{marginLeft: 10}}>{selectedCoupon}</span>
                {isShow3 && (
                    <div className="ant-form-explain">活动奖励不能为空</div>
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col>
              <Divider style={{margin: 0}}/>
            </Col>
          </Row>
          <Row className="container" style={{marginTop: 0, marginBottom: 0}}>
            <Col span={24}>
              <Typography.Title level={4}>分享设置</Typography.Title>
            </Col>
            <Col span={24}>
              <Form.Item
                  label="文章摘要"
                  name="shareProfile"
                  rules={[
                    {
                      required: true,
                      message: '请输入文章摘要',
                      trigger: 'blur'
                    }
                  ]}
              >
                <Input.TextArea style={{height: 120, resize: 'none'}}/>
              </Form.Item>
              <Form.Item
                  label="短链接预览"
                  name="shareUrl"
                  rules={[
                    {
                      required: true,
                      message: '请输入短链接预览',
                      trigger: 'blur'
                    }
                  ]}
              >
                <Input addonBefore="http://" style={{width: 300}}/>
              </Form.Item>
              <Form.Item label=" " colon={false}>
                <Button type="primary" htmlType="submit">
                  发布
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        {/* 指定店铺 */}
        <Modal
            title="选择店铺"
            open={shopOpen}
            width={750}
            onCancel={() => {
              setShopOpen(false)
              // 判断店铺是否为空
              if (businessId.length === 0) {
                setIsShow(false)
              } else {
                setIsShow(true)
              }
            }}
            // destroyOnClose
            maskClosable={false}
            onOk={() => {
              setShopOpen(false)
              setBusinessId(targetKeys)
              console.log(targetKeys)
              // 通过id找到对应的店铺名称
              const newTargetKeys = targetKeys.map((item) => {
                const target = mockData.find((data) => data.key === item)
                return target ? target.title : ''
              })
              setBusinessName(newTargetKeys)
              // 判断店铺是否为空
              if (businessId.length === 0) {
                setIsShow(false)
              } else {
                setIsShow(true)
              }
            }}
        >
          <Divider/>
          <Row>
            <Col span={8} style={{paddingRight: 20}}>
              <TreeSelect
                  style={{width: '100%'}}
                  placeholder="区域选择"
                  treeData={regionData}
                  value={region}
                  treeCheckable={true}
                  onChange={async (value, extra) => {
                    const level = getNodeLevel(value, regionData);
                    setRegion(value)
                    //console.log(value)
                    // 如果数组不为空
                    if (value.length !== 0) {
                      // 查询对应的店铺
                      const res = await shopListByCityIdAPI({
                        cityIdList: value,
                        level: level,
                        pageNo: 1,
                        pageSize: 100
                      })
                      //console.log(res)
                      //如果查到数据则填充
                      if (res.data != null) {
                        // 设置数据
                        const arr = res.data.map((item) => {
                          return {
                            key: item.id,
                            title: item.storeName,
                            chosen: false
                          }
                        })
                        setMockData(arr)
                      } else {
                        setMockData([])
                      }
                    } else {
                      setMockData([])
                    }
                  }}
                  showCheckedStrategy={TreeSelect.SHOW_PARENT}
              />
            </Col>
            <Col span={16}>
              <Transfer
                  dataSource={mockData}
                  showSearch
                  titles={['店铺', '店铺']}
                  targetKeys={targetKeys}
                  onChange={(newValue) => {
                    setTargetKeys(newValue)
                  }}
                  render={(item) => item.title}
              />
            </Col>
          </Row>
        </Modal>
        {/* 指定人群 */}
        <Modal
            title="选择人群"
            open={personOpen}
            width={1000}
            onCancel={() => {
              setPersonOpen(false)
              // 判断人群是否为空
              alert("cancel=" + selectedConfirmPersonId.length)
              if (selectedConfirmPersonId.length === 0) {
                setIsShow2(false)
              } else {
                setIsShow2(true)
              }
            }}
            maskClosable={false}
            onOk={() => {

              setPersonOpen(false)
              setSelectedConfirmPersonId(selectedPersonId)
              setSelectedConfirmPerson(selectedPerson)
              // 判断人群是否为空
              if (selectedPersonId === null || selectedPersonId === '') {
                setIsShow2(true)
              } else {
                setIsShow2(false)
              }
            }}
        >
          <Divider/>
          <Row>
            <Col span={24}>
              <Form onFinish={() => {
              }} layout="inline">
                <Form.Item name="person" label="人群名称">
                  <Input placeholder="请输入人群名称"/>
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
          <Row style={{marginTop: 20}}>
            <Col span={24}>
              <Table
                  rowKey="id"
                  // 打开模态框框，设置默认选中人群
                  selectedRowKeys={selectedPersonId}
                  rowSelection={{
                    type: 'checkbox',
                    // 获取选中的
                    onChange: (selectedRowKeys, selectedRows) => {
                      console.log(selectedRowKeys, selectedRows)
                      // 将groupName放到数组中
                      const selectedRowsName = selectedRows.map(
                          (item) => item.groupName
                      )
                      setSelectedPerson(selectedRowsName)
                      setSelectedPersonId(selectedRowKeys)
                    }
                  }}
                  dataSource={personList}
                  columns={[
                    {key: 'id', title: '序号', dataIndex: 'id'},
                    {key: 'groupName', title: '人群名称', dataIndex: 'groupName'},
                    {key: 'desc', title: '人群描述', dataIndex: 'desc'},
                    {
                      key: 'userNumber',
                      title: '用户数量',
                      dataIndex: 'userNumber'
                    }
                  ]}
                  pagination={{
                    pageSize: 5
                  }}
              />
            </Col>
          </Row>
        </Modal>
        {/* 选择优惠券 */}
        <Modal
            title="选择优惠券"
            open={couponOpen}
            width={1000}
            onCancel={() => setCouponOpen(false)}
            maskClosable={false}
            onOk={() => {
              setCouponOpen(false)
              setSelectedCouponId(tmpSelectedCouponId)
              setSelectedCoupon(tmpSelectedCoupon)
              if (selectedCouponId === null || selectedCouponId === '') {
                setIsShow3(true)
              } else {
                setIsShow3(false)
              }
            }}
        >
          <Divider/>
          <Row>
            <Col span={24}>
              <Form onFinish={() => {
              }} layout="inline">
                <Form.Item name="couponName" label="优惠券名称">
                  <Input placeholder="请输入优惠券名称"/>
                </Form.Item>
                <Form.Item name="couponName" label="优惠券类型">
                  <Select placeholder="请选择优惠券类型" style={{width: 200}}/>
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
          <Row style={{marginTop: 20}}>
            <Col span={24}>
              <Table
                  rowKey="id"
                  // 设置默认选中的
                  selectedRowKeys={tmpSelectedCouponId}
                  rowSelection={{
                    type: 'radio',
                    // 获取选中的
                    onChange: (selectedRowKeys, selectedRows) => {
                      console.log(selectedRowKeys, selectedRows)
                      setTmpSelectedCoupon(selectedRows[0].couponName)
                      setTmpSelectedCouponId(selectedRowKeys[0])
                    }
                  }}
                  dataSource={couponList}
                  columns={[
                    {key: 'id', title: '序号', dataIndex: 'id'},
                    {
                      key: 'couponName',
                      title: '优惠券名称',
                      dataIndex: 'couponName'
                    },
                    {
                      key: 'describes',
                      title: '优惠券类型   ',
                      dataIndex: 'describes'
                    },
                    {key: 'describes', title: '优惠内容', dataIndex: 'describes'},
                    {key: 'usageNum', title: '总数量', dataIndex: 'usageNum'}
                  ]}
              />
            </Col>
          </Row>
        </Modal>
      </>
  )
}